<template>
	<div>
		<el-row :gutter="10">
			<el-col :span="24">
				<el-card shadow="never" class="card">
					<div id="charts_one" style="width:100%;min-height:80vh">
						<!-- <Search size='small' :searchVisible="searchVisible" :searchData.sync="searchData"  :searchForm = "searchForm" @refresh_list="index"></Search> -->
						<div class="btn-group" style="margin-bottom:11px;">
							<div>
								<el-button type="success" size="mini" icon="el-icon-plus" @click="add(ids)"
									v-if="checkPermission('/admin/Api/add.html')">{{$t('action.add')}}</el-button>
								<el-button type="primary" :disabled="single" size="mini" icon="el-icon-edit"
									@click="update(ids)" v-if="checkPermission('/admin/Api/update.html')">
									{{$t('action.update')}}</el-button>
								<el-button type="danger" :disabled="multiple" size="mini" icon="el-icon-delete"
									@click="del(ids)" v-if="checkPermission('/admin/Api/delete.html')">
									{{$t('action.delete')}}</el-button>
							</div>
							<table-tool :searchVisible.sync="searchVisible" :fieldList="fieldList" @refresh_list="index"
								:searchTool="true"></table-tool>
						</div>
						<el-table :row-class-name="rowClass" @selection-change="selection" @row-click="handleRowClick"
							row-key="id" :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
							v-loading="loading" ref="multipleTable" border class="eltable" :data="list"
							style="width: 100%">
							<el-table-column align="center" type="selection" width="42"></el-table-column>
							<el-table-column align="center" type='' v-if="fieldList[0].checked" property="id" label="ID"
								show-overflow-tooltip width="70">
							</el-table-column>
							<el-table-column align="center" v-if="fieldList[1].checked" property="menu_id"
								:label="$t('field.Api_menu_id')" show-overflow-tooltip width="">
							</el-table-column>
							<el-table-column align="center" v-if="fieldList[2].checked" property="name"
								:label="$t('field.Api_name')" show-overflow-tooltip width="">
							</el-table-column>
							<el-table-column align="center" v-if="fieldList[3].checked" property="api_name"
								:label="$t('field.Api_api_name')" show-overflow-tooltip width="">
							</el-table-column>
							<el-table-column align="center" v-if="fieldList[4].checked" property="type"
								:label="$t('field.Api_type')" show-overflow-tooltip width="">
								<template slot-scope="scope">
									<el-tag v-if="scope.row.type == 'POST'" size="mini" effect="dark">POST</el-tag>
									<el-tag v-if="scope.row.type == 'GET'" size="mini" effect="dark">GET</el-tag>
								</template>
							</el-table-column>
							<el-table-column align="center" v-if="fieldList[5].checked" property="return_type"
								:label="$t('field.Api_return_type')" show-overflow-tooltip width="">
							</el-table-column>
							<el-table-column align="center" v-if="fieldList[6].checked" property="parameters_table"
								:label="$t('field.Api_parameters')" show-overflow-tooltip width="">
							</el-table-column>
							<el-table-column align="center" v-if="fieldList[7].checked" property="remark"
								:label="$t('field.Api_remark')" show-overflow-tooltip width="">
							</el-table-column>
							<el-table-column align="center" v-if="fieldList[8].checked" property="action_type"
								:label="$t('field.Api_action_type')" show-overflow-tooltip width="">
							</el-table-column>
							<el-table-column :fixed="$store.getters.device !== 'mobile'?'right':false"
								:label="$t('system.operation')" align="center" width="160">
								<template slot-scope="scope">
									<div v-if="scope.row.id">
										<el-button size="mini" type="primary" @click="update(scope.row)"
											v-if="checkPermission('/admin/Api/update.html')"><i
												class="el-icon-edit" />{{$t('action.update')}}</el-button>
										<el-button size="mini" type="danger" @click="del(scope.row)"
											v-if="checkPermission('/admin/Api/delete.html')"><i
												class="el-icon-delete" />{{$t('action.delete')}}</el-button>
									</div>
								</template>
							</el-table-column>
						</el-table>
						<Page :total="page_data.total" :page.sync="page_data.page" :limit.sync="page_data.limit"
							@pagination="index" />
					</div>
				</el-card>
			</el-col>
		</el-row>
		<!--添加-->
		<Add :show.sync="dialog.addDialogStatus" :action="action" size="small" @refresh_list="index"></Add>
		<!--修改-->
		<Update :info="updateInfo" :action="action" :show.sync="dialog.updateDialogStatus" size="small" @refresh_list="index"></Update>
	</div>
</template>
<script>
import {
	index,
	updateExt,
	getUpdateInfo,
	del,
} from '@/api/admin/sysapi'
import Search from '@/components/common/Search.vue'
import Page from '@/components/common/Page.vue'
import TableTool from '@/components/common/TableTool.vue'
import { confirm, param2Obj } from '@/utils/common'
import Add from '@/views/admin/sys/api/add.vue'
import Update from '@/views/admin/sys/api/update.vue'
export default {
	name: 'api',
	components: {
		Search,
		Page,
		TableTool,
		Add,
		Update,
	},
	data() {
		return {
			dialog: {
				addDialogStatus: false,
				updateDialogStatus: false,
			},
			fieldList: [
				{ lable: 'ID', checked: true },
				{ lable: this.$t('field.Api_menu_id'), checked: true },
				{ lable: this.$t('field.Api_name'), checked: true },
				{ lable: this.$t('field.Api_api_name'), checked: true },
				{ lable: this.$t('field.Api_type'), checked: true },
				{ lable: this.$t('field.Api_return_type'), checked: true },
				{ lable: this.$t('field.Api_parameters'), checked: true },
				{ lable: this.$t('field.Api_remark'), checked: true },
				{ lable: this.$t('field.Api_action_type'), checked: true },
			],
			ids: [],
			selectRows: [],
			selectTotal: 0,
			single: true,
			multiple: true,
			list: [],
			small_tables: {},
			action: [],
			addInfo: {},
			updateInfo: {},
			loading: false,
			page_data: {
				limit: 20,
				page: 1,
				total: 20,
			},
			searchVisible: true,
			searchForm: [],
			searchData: {},
		}
	},
	methods: {

		index() {
			let param = {
				limit: this.page_data.limit,
				page: this.page_data.page,
				menu_id: this.$route.query.menu_id
			}
			this.loading = true
			index(param).then(res => {
				this.list = res.data.data
				this.small_tables = res.sql_field_data
				this.page_data.total = res.data.total
				this.action = res.actionList.filter(item => item.show_api)
				this.loading = false

			})
		},
		updateExt(row, field) {
			if (row.id) {
				updateExt({ id: row.id, [field]: row[field] }).then(res => {
					this.$message({ message: this.$t('system.success'), type: 'success' })
				})
			}
		},
		add() {
			this.dialog.addDialogStatus = true
		},
		update(row) {
			let id = row.id ? row.id : this.ids.join(',')
			getUpdateInfo({ id: id }).then(res => {
				if (res.status == 200) {
					this.dialog.updateDialogStatus = true
					this.updateInfo = res.data
				}
			})
		},
		del(row) {
			confirm({ content: this.$t('system.confirmOperation') }).then(() => {
				let ids = row.id ? row.id : this.ids.join(',')
				del({ id: ids }).then(res => {
					this.$message({ message: res.msg, type: 'success' })
					this.index()
				})
			}).catch(() => { })
		},
		selection(selection) {
			this.selectRows = selection
			this.selectTotal = selection.length
			this.ids = selection.map(item => item.id)
			this.single = selection.length != 1
			this.multiple = !selection.length
		},
		handleRowClick(row, rowIndex, event) {
			if (event.target.className !== 'el-input__inner') {
				this.$refs.multipleTable.toggleRowSelection(row)
			}
		},
		rowClass({ row, rowIndex }) {
			for (let i = 0; i < this.ids.length; i++) {
				if (row.id === this.ids[i]) {
					return 'rowLight'
				}
			}
		},
	},
	mounted() {
		this.index()
	}
}
</script>
<style  lang="scss">
@import '@/assets/scss/common.scss'
</style>